<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增商家</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 表单 -->
    <el-row>
      <el-col :span="12">
        <!-- 商家封面 -->
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <!-- 演员头像 -->
          <el-form-item label="商家图片" prop=" b_img">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:9000/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-image
                v-if="form.b_img"
                :src="form.b_img"
                class="avatar"
                fit="cover"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- 具体信息 -->
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <el-form-item label="商家名称" prop="b_name">
            <el-input v-model="form.b_name"></el-input>
          </el-form-item>
          <!-- 商家所供 -->
          <el-form-item label="商家所供" prop="b_offer">
            <el-checkbox-group v-model="form.b_offer">
              <el-checkbox label="干净饮用水" name="type"></el-checkbox>
              <el-checkbox label="消毒猫砂盆" name="type"></el-checkbox>
              <el-checkbox label="玩具" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="商家评分" prop="b_socre">
            <el-input v-model="form.b_socre"></el-input>
          </el-form-item>
          <el-form-item label="商家价格" prop="b_price">
            <el-input v-model="form.b_price"></el-input>
          </el-form-item>
          <el-form-item label="商家面积" prop="b_JS">
            <el-input v-model="form.b_JS"></el-input>
          </el-form-item>
          <el-form-item label="商家地址" prop="b_city">
            <el-input v-model="form.b_city"></el-input>
          </el-form-item>
          <el-form-item label="商家经验" prop="b_feature">
            <el-input v-model="form.b_feature"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="b_city_detail">
            <el-input v-model="form.b_city_detail"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即增加</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        b_img: "",
        b_price: "",
        b_JS: "",
        b_socre: "",
        b_feature: "",
        b_city: "",
        b_city_detail: "",
        b_offer: [],
        b_name: "",
      },
      rules: {
        b_img: [{ required: true, message: "请选择商家图片", trigger: "blur" }],

        b_name: [
          {
            required: true,
            message: "请填写商家名称",
            trigger: "blur",
          },
        ],
        b_city: [
          {
            required: true,
            message: "请填写商家所在地",
            trigger: "blur",
          },
        ],
        b_socre: [
          {
            required: true,
            message: "请填写评分",
            trigger: "blur",
          },
        ],
        b_price: [{ required: true, message: "请填写价格", trigger: "blur" }],
        b_offer: [
          {
            required: true,
            message: "请至少选择一个商家所供",
            trigger: "change",
          },
        ],
        b_JS: [{ required: true, message: "请填写店铺面积", trigger: "blur" }],
        b_feature: [
          { required: true, message: "请填写商家经验", trigger: "blur" },
        ],
        b_city_detail: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let url = "/pet-business/add";
          let params = `b_img=${this.form.b_img}&&b_price=${this.form.b_price}&&b_JS=${this.form.b_JS}&&b_socre=${this.form.b_socre}&&b_feature=${this.form.b_feature}&&b_city=${this.form.b_city}&&b_city_detail=${this.form.b_city_detail}&&b_offer=${this.form.b_offer}&&b_name=${this.form.b_name}`;
          this.axios.post(url, params).then((res) => {
            console.log("新增商家请求", res);
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.$router.push("/home/business-list");
            }
          });
        } else {
          this.$message.warning("请完善表单");
        }
      });
    },
    // 上传头像的业务
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.code == 200) {
        this.form.b_img = res.data;
        console.log(this.form.b_img);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
